<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: aaa
  Date: 2023/12/2
  Time: ฅ(΅•ㅅ•΅❀)ฅ 15:51
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>管理员管理</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="<c:url value="/js/vue.js"/>"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
	<el-container>
		<el-aside width="200px" height="100%">
			<el-menu :default-active="activeMenu" @select="handleMenuSelect" >
				<el-submenu index="sub1">
					<template slot="title">FunPlay游戏商店管理管理</template>
					<el-menu-item index="admin">管理员管理</el-menu-item>
					<el-menu-item index="dish">菜品管理</el-menu-item>
					<el-menu-item index="category">菜品分类管理</el-menu-item>
					<el-menu-item index="customer">用户管理</el-menu-item>
					<el-menu-item index="comment">菜品评论管理</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-aside>
		<el-container>
			<el-main>
				<div>
					<h1>管理员管理</h1>
					<el-row :gutter="10" class="mb8">
						<el-col :span="1.5">
							<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
						</el-col>
					</el-row>
					<el-table :data="admins" style="width: 100%">
						<el-table-column label="管理员编号" align="center" prop="adminId"></el-table-column>
						<el-table-column label="姓名" align="center" prop="adminName"></el-table-column>
						<el-table-column label="管理员账号" align="center" prop="adminUsername"></el-table-column>
						<el-table-column label="联系方式" align="center" prop="adminPhone"></el-table-column>
						<el-table-column label="邮箱" align="center" prop="adminEmail"></el-table-column>
						<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
							<template slot-scope="scope">
								<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
								<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

					<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
						<el-form ref="form" :model="form" :rules="rules" label-width="110px">
							<el-form-item label="姓名" prop="adminName">
								<el-input v-model="form.adminName" placeholder="请输入管理员姓名"></el-input>
							</el-form-item>
							<el-form-item label="管理员账号" prop="adminUsername">
								<el-input v-model="form.adminUsername" placeholder="请输入管理员账号" />
							</el-form-item>
							<el-form-item label="联系方式" prop="adminPhone">
								<el-input v-model="form.adminPhone" placeholder="请输入联系方式" />
							</el-form-item>
							<el-form-item label="邮箱" prop="adminEmail">
								<el-input v-model="form.adminEmail" placeholder="请输入邮箱" />
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="submitForm">确 定</el-button>
							<el-button @click="cancel">取 消</el-button>
						</div>
					</el-dialog>

				</div>
			</el-main>
		</el-container>
	</el-container>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			activeMenu: 'admin',  // 默认选中的菜单项
			admins: [],
			title: "",
			form: {},
			open: false,
			rules: {
				adminId: [
					{ required: true, message: '管理员ID不能为空', trigger: 'blur' }
				],
				adminUsername: [
					{ required: true, message: '管理员账号', trigger: 'blur' }
				],
				adminPhone: [
					{ required: true, message: '管理员联系方式不能为空', trigger: 'blur' }
				],
			}
		},
		created() {
			this.getAdminList();
		},
		methods: {
			// 提交
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.adminId != null) {
							axios.post('http://localhost:8080/onerice_war/admin', {
								action: 'update',
								adminId: this.form.adminId,
								adminName: this.form.adminName,
								adminEmail: this.form.adminEmail,
								adminPhone: this.form.adminPhone,
								adminUsername: this.form.adminUsername
							}, {
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
								}
							})
								.then(response => {
									this.msgSuccess("修改成功");
									this.open = false;
									this.getAdminList();
								})
								.catch(error => {
									console.error('修改失败:', error);
								});
						} else {
							axios.post('http://localhost:8080/onerice_war/admin', {
								action: 'add',
								adminId: this.form.adminId,
								adminName: this.form.adminName,
								adminEmail: this.form.adminEmail,
								adminPhone: this.form.adminPhone,
								adminUsername: this.form.adminUsername
							}, {
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
								}
							})
								.then(response => {
									this.msgSuccess("新增成功");
									this.open = false;
									this.getAdminList();
								})
								.catch(error => {
									console.error('新增失败:', error);
								});
						}
					}
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 修改按钮操作
			handleUpdate(row) {
				this.reset();
				const adminId = row.adminId;
				axios.get('http://localhost:8080/onerice_war/admin', { params: { action: 'getById', adminId: adminId } })
					.then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "修改管理员信息";
				});
			},
			handleDelete(row) {
				// 删除管理员
				this.$confirm('是否确认删除管理员编号为"' + row.adminId + '"的数据？', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function () {
					return axios.post('http://localhost:8080/onerice_war/admin', {
						action: 'delete',
						adminId: row.adminId
					}, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					});
				}).then(() => {
					this.getAdminList();
					this.msgSuccess("删除成功");
				})
			},
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加管理员信息";
			},
			getAdminList() {
				// 获取管理员数据
				axios.get('http://localhost:8080/onerice_war/admin', { params: { action: 'getAll' } })
					.then(response => {
						// 请求成功，将数据赋值给admins
						console.log(JSON.stringify(response.data));
						this.admins = response.data;
					})
					.catch(error => {
						// 请求失败
						console.error('Error fetching admin data:', error);
					});
			},
			// 表单重置
			reset() {
				this.form = {
					adminId: null,
					adminName: null,
					adminUsername: null,
					adminPhone: null,
					adminEmail: null,
				};
			},
			msgSuccess(msg) {
				this.$message({ showClose: true, message: msg, type: "success" });
			},
			// 侧边栏选择事件
			handleMenuSelect(index) {
				switch (index) {
					case 'admin':
						window.location.href = "adminManage.jsp";
						break;
					case 'dish':
						window.location.href = "dishManage.jsp";
						break;
					case 'category':
						window.location.href = "categoryManage.jsp";
						break;
					case 'customer':
						window.location.href = "customerManage.jsp";
						break;
					case 'comment':
						window.location.href = "commentManage.jsp";
						break;
					default:
						break;
				}
			},
		},
	});
</script>
</body>
</html>
